import React,{Component,Fragment} from 'react';
import PropType from 'prop-types';
class TodoItem extends Component{
    constructor(props){
        super(props);
        this.state={
            list:this.props.content
        }
        //this.handleClickDelete = this.handleClickDelete.bind(this);节约性能
    }
    componentWillReceiveProps(){
        //属性props改变执行
    }
    render(){
      
        return(
            <Fragment>
                <ul> {this.getItemElem()} </ul> 
            </Fragment>
        )
    }
    getItemElem(){
        let itemList = this.props.content
        return itemList.map((item, index) => {
            // dangerouslySetInnerHTML = {{ __html: item }} 
                return ( 
                <li key = {index}  
                > 
                {this.props.test}{item}
                <button ref = {(index)=>{this.index=index}} data-index={index} onClick = {this.handleClickDelete.bind(this,index)} > 删除 
                </button>
                </li > )
            }

        )
    }
    handleClickDelete(index){
        console.log(this.index);
        this.props.deleteListValue(index)
    }
    
}
 TodoItem.propTypes ={
     content:PropType.string.isRequired
 }
  TodoItem.defaultProps={
     test:'hello world'
}
export default TodoItem;